<template>
  <d2-container>
    <template slot="header"></template>
    <el-row style="margin: 20px">
      <el-button type="primary" @click="createWorkFlow()">新建编排</el-button>
    </el-row>
    <template>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px; margin-left: 15px"
      >
        <el-table-column prop="id" label="序号" fixed align="center" width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          label="模型名称"
          fixed
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="adminName"
          align="center"
          label="负责人"
          fixed
          width="180"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="azId"
          label="AzkabanId"
          width="180">
        </el-table-column> -->
        <el-table-column
          prop="scheduled"
          align="center"
          :formatter="formatBoolean"
          label="调度"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="scheduleCron"
          align="center"
          label="调度时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          align="center"
          width="280"
          label="所属科研项目"
        >
        </el-table-column>
        <el-table-column
          prop="projectNames"
          align="center"
          label="所属团队"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
          width="200"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <!-- <el-button @click="execWorkFlow(scope.row)" type="text" size="small">执行</el-button> -->
            <el-button
              @click="scheduledWorkFlow(scope.row)"
              type="text"
              size="small"
              >调度</el-button
            >
            <el-button @click="editWorkFlow(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button @click="delWorkFlow(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 翻页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="change"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
      >
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import {
  listWorkflows,
  execWorkflow,
  schedWorkflow,
  delWorkflow,
} from "@/api/task.workflow.js";

import { publicMethod } from "@/api/util.js";

export default {
  inject: ["reload"],
  methods: {
    async listWorkflows(pagesize, index) {
      const data = await listWorkflows(index, pagesize);
      console.log(1234, data);
      if (data.status == 200) {
        this.tableData = data.data;
      }
    },
    // execWorkFlow (row) {
    //   console.log(row)
    //   execWorkflow(row.id)
    // },
    scheduledWorkFlow(row) {
      console.log(row);
      schedWorkflow(row.id);
    },
    editWorkFlow(row) {
      this.$router.replace("/task/easyflow?id=" + row.id);
    },
    delWorkFlow(row) {
      console.log(row);
      delWorkflow(row.id);
      this.reload();
    },
    createWorkFlow() {
      this.$router.replace("/task/easyflow");
    },
    formatBoolean: function (row, column, cellValue) {
      var ret = ""; // 你想在页面展示的值
      if (cellValue) {
        ret = "是"; // 根据自己的需求设定
      } else {
        ret = "否";
      }
      return ret;
    },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return publicMethod.getTimestamp(date);
    },
    // 每页几条
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      let index = this.currentPage;
      this.listWorkflows(val, index);
    },
    // 页数
    change(val) {
      this.currentPage = val;
      let pageSize = this.pageSize;
      this.listWorkflows(pageSize, val);
    },
  },
  mounted() {
    this.listWorkflows(this.pageSize, this.currentPage);
    listWorkflows().then((res) => {
      this.total = res.data.length;
    });
  },
  data() {
    return {
      tableData: [
        //   {
        //   id: 1,
        //   name: '20201105数据清理',
        //   admin: 'admin',
        //   azId: '1',
        //   scheduled: false,
        //   scheduleCron: '',
        //   projectName:'燃烧数据清理',
        //   app: {
        //     'name': '燃烧数据清理'
        //   },
        //   createTime: '2021-04-19 12:20:00'
        // }, {
        //   id: 2,
        //   name: '20201105数据清理',
        //   admin: 'admin',
        //   azId: '1',
        //   scheduled: false,
        //   scheduleCron: '0 0/10 0 0 0 ？',
        //   projectName:'燃烧数据清理',
        //   app: {
        //     'name': '燃烧数据清理'
        //   },
        //   createTime: '2021-04-19 12:20:00'
        // }, {
        //   id: 3,
        //   name: '20201105数据清理',
        //   admin: 'admin',
        //   azId: '1',
        //   scheduled: false,
        //   scheduleCron: '0 0/1 0 0 0 ？',
        //   projectName:'燃烧数据清理',
        //   app: {
        //     'name': '燃烧数据清理'
        //   },
        //   createTime: '2021-04-19 12:20:00'
        // }, {
        //   id: 4,
        //   name: '20210405数据清理',
        //   admin:'admin',
        //   azId: '1',
        //   scheduled: false,
        //   scheduleCron: '0 0 0 0 0 ？',
        //   projectName:'燃烧数据清理',
        //   app: {
        //     'name': '燃烧数据清理'
        //   },
        //   createTime: '2021-04-19 12:20:00'
        // }
      ],
      total: "",
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {},
    };
  },
};
</script>
<style lang="scss" scoped>
.block {
  margin: 10px 0px 0px 35px;
}
</style>
